<template>
<div>
    <div class="banner-warrap">
        <div class="view">
            <div class="search-view">
                <div class="search">
                    <span>添加日期:</span>
                    <Input v-model="bannerData.areaStart"  style="width: 150px;" />
                     </div>
                    <div class="search">--</div>
                    <div class="search">
                        <Input v-model="bannerData.areaEnd" style="width:150px" />
                     </div>
                     <div class="search">
                         <Button type="primary" @click="clickAdvert">搜索</Button>
                     </div>
                        <div class="search fr">
                            <Button type="primary" @click="addClick">添加广告</Button>
                        </div>
                    </div>
                </div>
                <div class="main-view">
                    <AdverList :data="this.listData" @on-action="clickAction"></AdverList>
                </div>
                <div slot="footer">
                   <pageView ></pageView>
                </div>
            </div>

            <!-- 操作弹框 -->
            <div v-if="addData.isShow">
                <AdverModel :data="addData" @on-submit="submitAction">
                </AdverModel>
            </div>
        </div>
    </div>
</template>

<script>
import AdverList from '@/view/advert/list/advertList'
import AdverModel from '@/view/advert/list/AdverModel'
import pageView from '@/components/Page'
export default {
    data() {
        return {
            isLoading: false,
            bannerData: {
                areaStart: '',
                areaEnd: ''
            },

            listData: {
                isLoading: false,
                data: [{
                    id: 1,
                    name: 'banner1',
                    size: '640*640',
                    time: '2019-1-1'
                }]
            },
            //  弹框数据
            addData: {
                isShow: false,
                actionType: null,
                isLoading: false,
                row: null,
                data: {}
            },

            // 分页
        };
    },
    components: {
        AdverList,AdverModel,pageView
    },
    methods: {
        clickAction(type, formData) {
            // console.log(type, formData)
            switch (type) {
                case 'edit':
                    this.addData.isShow = true,
                        this.addData.actionType = 2,
                        this.addData.data = formData
                    break;
                case 'del':
                    this.clickDel(formData);
            }
        },
        clickDel(formData) {

        },

        submitAction(fromData) {

        },
        // 添加广告按钮/
        addClick() {
             this.addData.isShow= true,
             this.addData.actionType = 1,
             this.addData.data= {}

        },
        //   搜索
        clickAdvert() {

        }
    }
};
</script>

<style lang="less" scoped>
.banner-warrap {
    padding: 40px 20px;

    .view {
        background-color: #fff;
        border: 1px solid #e6e6e6;
        padding: 30px 20px;

        .search {
            display: inline-block;
        }
    }
}
</style>
